<template>
  <el-dialog :visible.sync="dialogFormVisible" :title="title">
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="昨日销售" style="width:45%">
        <el-upload
          ref="uploadExcel"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :on-error="handleError"
          :on-exceed="exceedShow"
          :file-list="fileList"
          :action="importAtion"
          :auto-upload="false"
          :multiple="true"
          :headers="headers"
          :limit="100"
          accept=".xlsx,.xls"
          class="upload-demo">
          <el-button size="small" plain>选择文件</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="昨日配件" style="width:45%">
        <el-upload
          ref="uploadExcel1"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :on-error="handleError"
          :on-exceed="exceedShow"
          :file-list="fileList1"
          :action="importAtion1"
          :auto-upload="false"
          :multiple="true"
          :headers="headers"
          :limit="100"
          accept=".xlsx,.xls"
          class="upload-demo">
          <el-button size="small" plain>选择文件</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="七天销售" style="width:45%">
        <el-upload
          ref="uploadExcel2"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :on-error="handleError"
          :on-exceed="exceedShow"
          :file-list="fileList2"
          :action="importAtion2"
          :auto-upload="false"
          :multiple="true"
          :headers="headers"
          :limit="100"
          accept=".xlsx,.xls"
          class="upload-demo">
          <el-button size="small" plain>选择文件</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="本月销售合计" style="width:45%">
        <el-upload
          ref="uploadExcel3"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :on-error="handleError"
          :on-exceed="exceedShow"
          :file-list="fileList3"
          :action="importAtion3"
          :auto-upload="false"
          :multiple="true"
          :headers="headers"
          :limit="100"
          accept=".xlsx,.xls"
          class="upload-demo">
          <el-button size="small" plain>选择文件</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="本月配件" style="width:45%">
        <el-upload
          ref="uploadExcel4"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :on-error="handleError"
          :on-exceed="exceedShow"
          :file-list="fileList4"
          :action="importAtion4"
          :auto-upload="false"
          :multiple="true"
          :headers="headers"
          :limit="100"
          accept=".xlsx,.xls"
          class="upload-demo">
          <el-button size="small" plain>选择文件</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="上月毛利" style="width:45%">
        <el-upload
          ref="uploadExcel5"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :on-error="handleError"
          :on-exceed="exceedShow"
          :file-list="fileList5"
          :action="importAtion5"
          :auto-upload="false"
          :multiple="true"
          :headers="headers"
          :limit="100"
          accept=".xlsx,.xls"
          class="upload-demo">
          <el-button size="small" plain>选择文件</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="上月配件" style="width:45%">
        <el-upload
          ref="uploadExcel6"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :on-error="handleError"
          :on-exceed="exceedShow"
          :file-list="fileList6"
          :action="importAtion6"
          :auto-upload="false"
          :multiple="true"
          :headers="headers"
          :limit="100"
          accept=".xlsx,.xls"
          class="upload-demo">
          <el-button size="small" plain>选择文件</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="上上月配件" style="width:45%">
        <el-upload
          ref="uploadExcel7"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :on-error="handleError"
          :on-exceed="exceedShow"
          :file-list="fileList7"
          :action="importAtion7"
          :auto-upload="false"
          :multiple="true"
          :headers="headers"
          :limit="100"
          accept=".xlsx,.xls"
          class="upload-demo">
          <el-button size="small" plain>选择文件</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="上上上月配件" style="width:45%">
        <el-upload
          ref="uploadExcel8"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :on-error="handleError"
          :on-exceed="exceedShow"
          :file-list="fileList8"
          :action="importAtion8"
          :auto-upload="false"
          :multiple="true"
          :headers="headers"
          :limit="100"
          accept=".xlsx,.xls"
          class="upload-demo">
          <el-button size="small" plain>选择文件</el-button>
        </el-upload>
      </el-form-item>
      <hr>
      <el-form-item>
        <el-button size="small" type="primary" @click="uploadFile">立即上传</el-button>
        <el-button size="small" @click=" dialogFormVisible = flase ">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>

import { getToken } from '@/utils/auth'
import fileApi from '@/api/file/index'

export default {
  data() {
    return {
      saveLoading: false,
      dialogFormVisible: false,
      title: '导入',
      limitNum: 1,
      formLabelWidth: '80px',
      nodeTypeId: '',
      form: {
        file: ''
      },
      headers: {
        Authorization: getToken()
      },
      fileList: [],
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      fileList5: [],
      fileList6: [],
      fileList7: [],
      fileList8: []
    }
  },
  computed: {
    importAtion() {
      return fileApi.action3()
    },
    importAtion1() {
      return fileApi.action4()
    },
    importAtion2() {
      return fileApi.action5()
    },
    importAtion3() {
      return fileApi.action6()
    },
    importAtion4() {
      return fileApi.action7()
    },
    importAtion5() {
      return fileApi.action8()
    },
    importAtion6() {
      return fileApi.action9()
    },
    importAtion7() {
      return fileApi.action10()
    },
    importAtion8() {
      return fileApi.action11()
    }
  },
  methods: {
    init(nodeTypeId) {
      this.nodeTypeId = nodeTypeId
      this.dialogFormVisible = true
    },
    // 文件超出个数限制时的钩子
    exceedFile(files, fileList) {
      this.$notify.warning({
        title: '警告',
        message: `只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`
      })
    },
    // 文件状态改变时的钩子
    fileChange(file, fileList) {
      console.log('change')
      console.log(file)
      this.form.file = file.raw
      console.log(this.form.file)
      console.log(fileList)
    },
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUploadFile(file) {
    },
    handlePreview(file) {
      console.log(file)
    },
    handleError(file, fileList) {
      this.$message.error('文件上传失败')
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    exceedShow(file, fileList) {
      this.$message.error('每次上传最多100个文件！')
    },
    // 文件上传成功时的钩子
    handleSuccess(res, file, fileList) {
      console.log(res.data)
      this.$notify.success({
        title: '成功',
        message: `文件上传成功`
      })
      this.$refs.uploadExcel.clearFiles()
      this.dialogFormVisible = false
      this.$emit('import-success')
    },
    uploadFile() {
      this.$refs.uploadExcel.submit()
      this.$refs.uploadExcel1.submit()
      this.$refs.uploadExcel2.submit()
      this.$refs.uploadExcel3.submit()
      this.$refs.uploadExcel4.submit()
      this.$refs.uploadExcel5.submit()
      this.$refs.uploadExcel6.submit()
      this.$refs.uploadExcel7.submit()
      this.$refs.uploadExcel8.submit()
    }
    // importNode() {
    //   debugger
    //   nodeApi.importNode().then(res => {
    //     if (!res) {
    //       return
    //     }
    //     var blob = new Blob([res], { type: 'application/vnd.ms-excel;charset=utf-8' })
    //     var url = window.URL.createObjectURL(blob)
    //     var aLink = document.createElement('a')
    //     aLink.style.display = 'none'
    //     aLink.download = '事项导入模板.xlsx'
    //     aLink.href = url
    //     document.body.appendChild(aLink)
    //     aLink.click()
    //   }).catch(err => {
    //     console.log(err)
    //   })
    // }
  }
}
</script>
<style scoped>
  /deep/.el-dialog__header {
    background-color: #edf6ff;
  }
</style>
